/**
 * 学习目标：react中条件渲染的三种方式
 * 效果： 🔔类似v-if，条件不满足，直接移除DOM节点
 *
 */
import React from 'react';
import ReactDOM from 'react-dom';

// 需求： 当isLoading为true时显示 加载中， 为false时显示加载完毕

const isLoading = false;
// 1. if else语句 配合函数，决定不同的返回值
function loadData() {
  if (isLoading) {
    return <h1>加载中</h1>;
  } else {
    return <h2>数据加载完毕</h2>;
  }
}

// 2. 三元
const title = isLoading ? <h1>加载中</h1> : <h2>数据加载完毕</h2>;

const divNode = (
  <>
    {loadData()}

    <div>{title}</div>

    {/*  3. 逻辑且 */}
    <div>{isLoading && <h1>加载中</h1>}</div>
    <div>{!isLoading && <h2>数据加载完毕</h2>}</div>
  </>
);

ReactDOM.render(divNode, document.getElementById('root'));
